<template>
	<view>
		<view>
			<view>
				<view class="cu-form-group">
					<view class="title">储位</view>
					<input placeholder="" :disabled="true" v-model="storeNum" name="input" />
					<button class="cu-btn bg-green shadow" @tap="onChangeStore">切换</button>
				</view>
				<todo-input v-model="todoNum" :focus="todoFocus" @focusChange="onTodoFocusChange" @confirm="onConfirmTodo"></todo-input>
			</view>

			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text>
					转移记录
				</view>
			</view>
			<todo-list-view :top="330">
				<view v-for="(item, idx) in todoList" class="cu-item">
					<view class="content padding-tb-sm">
						<view>
							<text class="cuIcon-formfill text-blue margin-right-xs"></text>
							<text>PKG:</text>
							{{ item.pkg_id }}
						</view>
						<view class="text-gray text-sm">
							<text class="lg text-gray cuIcon-settingsfill"></text>
							<text>料号:</text>
							{{ item.part_id }}
						</view>
						<view class="text-gray text-sm">
							<text class="lg text-gray cuIcon-settingsfill"></text>
							<text>储位:</text>
							{{ item.bin_id }}
						</view>
					</view>
					<view class="action">
						<view class="text-grey text-xs">
							<text class="text-gray">数量:</text>
							{{ item.pkg_qty }}
						</view>
						<view class="text-gray  text-xs">
							<text class="text-gray">仓码:</text>
							{{ item.wh_id }}
						</view>
					</view>
				</view>
			</todo-list-view>
		</view>
	</view>
</template>

<script>
import api from '@/serveices/wms-api.js';
import billInput from './bill-input.vue';
import todoInput from './todo-input.vue';
import todoListView from './todo-list-view.vue';
import util from '@/serveices/util.js';

export default {
	components: { billInput, todoInput, todoListView },
	data() {
		return {
			todoList: [],
			todoNum: '',
			todoFocus:true,
			storeNum: ''
		};
	},
	methods: {
		onTodoFocusChange(focus){
			this.todoFocus = focus
		},
		onChangeStore() {
			this.storeNum = '';
			this.todoList = [];
			this.todoNum = '';
			this.todoFocus = true
		},
		onTodoBlur(arg){
			console.log('blur',arg)
			this.todoFocus = false
		},
		onConfirmTodo() {
			if (!this.storeNum) {
				// 储位为空 扫描内容作为储位处理
				api.checkbin(this.todoNum)
					.then(r => {
						this.storeNum = r.data.bin_id;
						this.todoNum = ''
						util.playSuccess();
					})
					.catch(err => {
						this.todoNum = ''
						util.playFailed();
					});
			} else {
				// 转移
				api.move(this.storeNum, this.todoNum)
					.then(r => {
						this.todoList.splice(0, 0, ...r.data);
						this.todoList = this.todoList.filter((x, idx) => idx < 10);
						this.todoNum = ''
						util.playSuccess();
					})
					.catch(err => {
						this.todoNum = ''
						util.playFailed();
					});
			}
		}
	},
	beforeMount() {}
};
</script>

<style>
.fixed {
	position: fixed;
}
</style>
